var c = document.getElementById('c');
var ctx = c.getContext('2d');

/**
 * canvas 通过ctx.font属性设置字型；
 * 该属性是一个css3 font属性字符串值，包括font-family、font-variant、font-weight、font-size、line-height、font-style 六个属性值
 *      font-style: 可用值 normal、italic（斜体）、oblique（更斜） ，默认为mormal。
 *      font-variant：可用值 normal、small-caps
 *      font-weight：指定笔画粗细 预设值 lighter、normal(400)、bold(700)、bolder，和css一样可以通过100-900的整百数值控制。
 *      font-size：字型大小，预设值 xx-small、x-small、medium、large、x-large、xx-large、smaller、larger、length、和百分比。同样可以指定数值
 *      line-height: 没什么好说的，浏览器会固定该值为normal
 *      font-family：设置字体集，这与css规则一样。
 */
var LEFT_COLUMN_FONTS = [
    '2em palatino', 'bolder 2em palatino', 'lighter 2em palatino', 'italic 2em palatino', 'oblique small-caps 24px palatino', 'bold 14pt palatino',
    'xx-large palatino', 'italic xx-large palatino'
];

var  RIGHT_COLUMN_FONTS = [
    'oblique 1.5em lucida console', 'x-large fantasy', 'italic 28px monaco', 'italic large copperplate', '36px century', '28px tahoma', 
    '28px impact', '1.7em verdana'
];

var LEFT_COLUMN_X = 25, RIGHT_COLUMN_X = 435, DELTA_Y = 50, TOP_Y = 50, y = 0;

ctx.fillStyle = 'blue';

LEFT_COLUMN_FONTS.forEach(function (font) {
    ctx.font = font;
    ctx.fillText(font, LEFT_COLUMN_X, y += DELTA_Y);
});

y = 0;

RIGHT_COLUMN_FONTS.forEach( function (font) {
    ctx.font = font;
    ctx.fillText(font, RIGHT_COLUMN_X, y += DELTA_Y);
})